<template>
  <Input
    class="custom-input"
    :size="size"
    :type="type"
    :placeholder="placeholder"
    :value="value"
    :readonly="readonly"
    :number="number"
    :rows="rows"
    :search="search"
    :disabled="disabled"
    @input="inputChange"
    @on-enter="inputEnter">
  </Input>
</template>

<script>
export default {
  emits: ['input', 'on-change', 'on-enter'],
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    type: {
      type: String,
      default: 'text'
    },
    size: {
      type: String,
      default: 'default'
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    readonly: {
      type: Boolean,
      default: false
    },
    number: {
      type: Boolean,
      default: false
    },
    rows: {
      type: Number,
      default: 2
    },
    search: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    inputEnter () {
      this.$emit('on-enter')
    },
    inputChange (val) {
      this.$emit('input', val)
      this.$emit('on-change', val)
    }
  }
}
</script>

<style lang="scss">
  @import 'common/scss/color';

  .custom-input {
    width: 100%;
    .ivu-input {
      background-color: $Color-formItemBg;
      // border: 1px solid #DEDEDE;
      border-radius: 2px;
      color: $Color-text;
    }
  }
</style>
